<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				background: #f5f5f5;
				color: #333333;
			}
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.nav{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				background: white;
			}
			.nav .navLi{
				width: 33%;
				text-align: center;
				padding: 3.2vw 0;
			}
			.state{
				color: #FF4443;
				border-bottom: 1px solid #FF4443;
			}
			.content{
				width: 93%;
				margin-top: 3.2vw;
			}
			.content .list{
				padding: 3.2vw;
				display: flex;
				background: white;
				flex-direction: row;
				align-items: center;
				margin-bottom: 3.2vw;
			}
			.listTxt{
				flex: 1;
			}
			.listTxt>div:nth-child(1){
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.listTxt>div:nth-child(2){
				color: #999999;
				margin-top: 1vw;
			}
			.listTxt>div:nth-child(3){
				color: #FF4443;
				margin-top: 1vw;
			}
			/* 图片自适应 */
			.jfK1{
			  width: 28%;
			  overflow: hidden;
			  position: relative;
			  margin-right: 3.2vw;
			}
			.jfK1 .jfImg1{
			  width: 100%;
			  height: 100%;
			  padding-top: 100%;
			  overflow: hidden;
			  background-position: center center;
			  background-repeat: no-repeat;
			  background-size: cover;
			  -webkit-background-size: cover;
			  -moz-background-size: cover;
			} 
		</style>
	</head>
	<body>
		<div class="main">
			<div class="nav">
				<div class="navLi state">待付款</div>
				<div class="navLi">已付款</div>
				<div class="navLi">已退款</div>
			</div>
			<div class="content">
				<!-- <div class="list">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div class="listTxt">
						<div>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
						<div>2021-04-20 10:22:22</div>
						<div>168元</div>
					</div>
				</div>
				<div class="list">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div class="listTxt">
						<div>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
						<div>2021-04-20 10:22:22</div>
						<div>168元</div>
					</div>
				</div> -->
			</div>
		</div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function(){
			$('.navLi').on('click',function(){
				if(!$(this).hasClass("state")){
					//alert('1')
					$(this).addClass("state")
					$(this).siblings().removeClass("state")
				}
			})
		})
	</script>
</html>
